<template>
	<view class="content">
		<label class="myLabel">
			资源名称：<input type="text" placeholder="请输入资源名称" @input="changeName" />
		</label>
		<label class="myLabel">
			是否收费：
			<radio-group @change="changePay">
				<label>
					<radio value="1" color="#FF9900" checked /><text>是</text>
					<radio value="0" color="#FF9900" /><text>否</text>
				</label>
			</radio-group>
		</label>
		<label class="myLabel">
			收费金额：<input v-model="pay_cion" type="digit" placeholder="请输入数字" @input="payCion" :disabled="disabled" /><text class="yuan">元</text>
		</label>
		<label class="myLabel">
			上传资源：
			<!-- <text class="tips">PS:只可上传一条资源</text> -->
		</label>
		<view class="upload">
			<view v-if="appendix" class="close" @tap="clear"><i class="iconfont iconguanbi"></i></view>
			<video v-if="appendix && files_type == 2" :src="appendix" class="video"></video>
			<!-- <audio v-if="appendix && files_type == 3" :src="appendix" controls></audio> -->
			<uni-listen v-if="appendix && files_type == 3" :src="appendix" :play="audioPlay" :allowPlay="allowPlay" @update="update"></uni-listen>
			<view v-if="appendix && files_type == 1" class="cont" style="background-image: url('../../static/image/word.png');background-size: 100% 100%;">
				<i class="iconfont iconwendangziyuan"></i>
			</view>
			<view v-if="!appendix" class="clickItem" @tap="upload">
				<i class="iconfont icon-hao"></i>
				<view class="clickFont">点击上传</view>
			</view>
		</view>
		<view class="yesButton" @tap="commit">确定上传</view>
	</view>
</template>

<script>
	import permision from "@/common/permission.js"
	import uniListen from "@/components/luch-audio/luch-audio.vue"
	export default {
		components: {
			uniListen
		},
		data() {
			return {
				cameraList: [{
						value: 'back',
						name: '后置摄像头',
						checked: 'true'
					},
					{
						value: 'front',
						name: '前置摄像头'
					},
				],
				cameraIndex: 0,
				is_pay: 1, //0为免费。1为收费
				pay_cion: 0, //收费金额
				files_type: '', //1为文档。2为视频，3为音频
				disabled: false,
				files_name: '', //资源名称
				question_id: '',
				appendix: '', //资源
				sign: '',
				audioPlay: false, //是否播放音频
				allowPlay: false //音频是否允许播放
			}
		},
		onLoad(e) {
			this.question_id = e.question_id
			this.$zapi.apiPost('user/App/getsign').then(res => {
				if (res.data.code == 200) {
					this.sign = res.data.data.sign;
				}
			});
		},
		methods: {
			changeName(e) {
				this.files_name = e.target.value;
			},
			/* 上传资源 */
			commit() {
				var _this = this;
				if (_this.appendix) {
					uni.showLoading({
						title: '加载中...',
						mask: true
					})
					var k_token = uni.getStorageSync('token');
					var data = {
						question_id: _this.question_id,
						upload_type: 1, //上传类型为试题
						is_pay: _this.is_pay,
						pay_cion: _this.pay_cion,
						files_type: _this.files_type,
						files_name: _this.files_name,
						sign: _this.sign,
						appendix: _this.appendix
					}
					_this.$zapi.apifile('user/resources.lists/ResAdd', data).then(res => {
						res.data = JSON.parse(res.data)
						uni.hideLoading();
						if (res.data.code == 200) {
							uni.showToast({
								title: '上传成功',
								icon: 'success'
							})
							setTimeout(function() {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						} else {
							uni.showToast({
								title: '上传失败',
								icon: 'none'
							})
						}
					})
				} else {
					uni.showToast({
						title: '请选择文件',
						icon: 'none'
					})
				}
			},
			/* 选择是否收费 */
			changePay(e) {
				this.is_pay = e.detail.value;
				if (this.is_pay == 0) {
					this.disabled = true;
				} else {
					this.disabled = false;
				}
			},
			/* 改变收费金额 */
			payCion(e) {
				this.pay_cion = e.detail.value;
			},
			/* 点击上传 */
			upload() {
				var _this = this;
				uni.showActionSheet({
					itemList: ['文档', '音频', '视频'],
					success: function(res) {
						if (res.tapIndex == 0) {
							_this.files_type = 1;
							// #ifdef APP-PLUS
							// APP 需调用uniapp插件市场的chuck-filemanager插件，可以选择试用，然后在mainfest.json中勾选该插件，既可在自定义基座中运行
							// chuck-filemanager插件地址 https://ext.dcloud.net.cn/plugin?id=680
							const open = uni.requireNativePlugin('chuck-filemanager')
							var temp = new Promise(resoleve => {
								open.onIntent('996', path => {
									resoleve(path);
								});
							})
							var p = temp.then((val) => {
								let index = val.lastIndexOf('.');
								let ext = val.substr(index + 1);
								let list = ['ppt', 'pptx', 'pps', 'ppsx', 'doc', 'docx'];
								var result = list.some(function(item) {
									return item == ext;
								})
								if (result) {
									_this.appendix = 'file://' + val;
								} else {
									_this.appendix = '';
									uni.showToast({
										title: '不支持当前格式',
										icon: 'none'
									})
								}
							});
							// #endif
						} else if (res.tapIndex == 2) {
							_this.files_type = 2;
							uni.chooseVideo({
								camera: _this.cameraList[_this.cameraIndex].value,
								sourceType: ['camera', 'album'],
								success: (res) => {
									_this.appendix = res.tempFilePath;
								}
							})
						} else if (res.tapIndex == 1) {
							_this.files_type = 3;
							// #ifdef APP-PLUS
							// APP 需调用uniapp插件市场的chuck-filemanager插件，可以选择试用，然后在mainfest.json中勾选该插件，既可在自定义基座中运行
							// chuck-filemanager插件地址 https://ext.dcloud.net.cn/plugin?id=680
							const open = uni.requireNativePlugin('chuck-filemanager')
							var temp = new Promise(resoleve => {
								open.onIntent('996', path => {
									resoleve(path);
								});
							})
							var p = temp.then((val) => {
								let index = val.lastIndexOf('.');
								let ext = val.substr(index + 1);
								let list = ['AVI', 'mp4', 'wmv', 'mp3', 'wma', 'wav', 'ape'];
								var result = list.some(function(item) {
									return item == ext;
								})
								if (result) {
									_this.appendix = 'file://' + val;
								} else {
									_this.appendix = '';
									uni.showToast({
										title: '不支持当前格式',
										icon: 'none'
									})
								}
							});
							// #endif
						}
						_this.$forceUpdate();
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				})
			},
			/* 清除已选择的资源 */
			clear() {
				this.appendix = '';
			},
			/* 改变音频播放状态 */
			update(state) {
				this.audioPlay = state;
			}
		}
	}
</script>

<style>
	page {
		background: #FAFAFA;
	}

	.myLabel {
		display: flex;
		justify-content: flex-start;
		background: #FFFFFF;
		height: 90upx;
		align-items: center;
		color: #333333;
		font-size: 34upx;
		padding: 0 30upx;
		width: 690upx;
		line-height: 1;
		margin-top: 16upx;
		white-space: nowrap;
	}

	.myLabel:first-child {
		margin-top: 0 !important;
	}

	radio-group {
		line-height: 90upx;
	}

	radio-group text {
		margin-right: 60upx;
	}

	uni-radio .uni-radio-input {
		margin-top: -6upx !important;
	}

	.yuan {
		position: absolute;
		right: 30upx;
	}

	.tips {
		color: #FF5722;
		font-size: 34upx;
	}

	.upload {
		padding: 30upx;
		width: 690upx;
		background: #FFFFFF;
	}

	.close {
		float: right;
		background: rgba(255, 0, 0, 0.7);
		border-radius: 50%;
		line-height: 1;
		width: 50upx;
		height: 50upx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		margin-top: -26upx;
	}

	.clickItem {
		width: 140upx;
		height: 140upx;
		border: 1upx solid #999999;
		opacity: 0.6;
		text-align: center;
		color: #999999;
		line-height: 1.2;
	}

	.icon-hao {
		font-size: 80upx;
		line-height: 1.2;
	}

	.clickFont {
		font-size: 22upx;
	}

	.image {
		width: 140upx;
		height: 140upx;
	}

	.video {
		max-width: 690upx;
	}

	.cont {
		max-width: 690upx;
		height: 392upx;
		background: linear-gradient(207deg, rgba(104, 229, 131, 1) 0%, rgba(38, 201, 157, 1) 100%);
		opacity: 1;
		border-radius: 12upx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.iconwendangziyuan {
		font-size: 160upx;
		color: #FFFFFF;
	}

	.yesButton {
		background: #FF9900;
		height: 80upx;
		line-height: 80upx;
		color: #FFFFFF;
		width: 690upx;
		margin: 90upx 30upx;
		text-align: center;
		font-size: 34upx;
		border-radius: 8upx;
	}
</style>
